<template>
    <router-link class="grid-content item" :to="'/product/detail/' + data.id">
        <img :src="data.picUrl" height="105px">
        <div class="pro-name text-elps-2">{{data.name}}</div>
        <div class="pro-info clearfix">
            <span>$ {{data.highCents | formatNumber}}</span>
            <a href="javascript:;">{{$t('index.list.btn')}}</a>
        </div>
    </router-link>

</template>

<script>
 import { formatCents } from '@/utils/auth'
    export default {
        props: {
            data: {
                type: Object,
                default: function (argument) {
                    return {}
                }
            }
        },
        data() {
        return {

        }
    },
    created() {
        
    },
    filters: {
        formatNumber: function(val) {
            return formatCents(val/100, 2, 3)
        }
    },
    methods: {

    }
    }
</script>
<style scoped>
    .item {
        background: #ffffff;
        height: 250px;
        padding: 25px 16px;
        text-align: center;
        display: inline-block;
    }
    .item img {
        margin-bottom: 32px;
    }
    .pro-name {
        font-size: 13px;
        color: black;
        margin-bottom: 14px;
        line-height: 16px;
        height: 32px;
        text-align: left;
    }
    .pro-info {
        text-align: justify;
    }
    .pro-info span {
        font-size: 14px;
        color: #333333;
        float: left;
        text-decoration: line-through;
    }
    .pro-info a {
        float: right;
        background: #FFB73E;
        width: 74px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        border-radius: 36px;
        font-size: 10px;
        color: #ffffff;
    }
</style>
<style type="text/css">


</style>

